<template>
	<view v-if="loaded" class="page">
		<!-- 帖子内容 -->
		<unicloud-db ref="postDB" :getone="true" collection="abu_post" :where="where_post" v-slot:default="{ data }"
			@load="onqueryload">
			<view class="post-content" style="width: 100%;">
				<!-- {{data}} -->
				<view v-if="data && data.title" class="post-title"
					style="display: flex;flex-direction: row;justify-content: space-around;width: 100%;align-items: center;">
					<text>{{ data.title }}</text>
					<button v-if="showdelete" @click="remove_item(data._id)" type="warn" size="mini">删除</button>
				</view>
				<view v-if="data && data.create_time" class="post-time">{{ timestampToDateString(data.create_time) }}
				</view>
				<image v-if="data&&data.post_file&&data.post_file.url" :src="data.post_file.url"
					style="width: 100%;  padding: 10px; " mode="aspectFill"></image>
				<view v-if="data && data.content" class="post-text">{{ data.content }}</view>
			</view>
		</unicloud-db>

		<!-- 评论列表 -->
		<unicloud-db ref="commentDB" collection="abu_post_comment,uni-id-users" :where="where_comment"
			field="create_time,post_id,content,commenter_id{nickname,avatar_file,avatar}" v-slot:default="{ data }">
			<view v-if="data.length != 0" class="comment-list">
				<view v-for="(comment, index) in data" :key="index" class="comment-item">
					<view class="comment-header">
						<image
							v-if="comment.commenter_id&&comment.commenter_id[0].avatar_file && comment.commenter_id[0].avatar_file.url"
							:src="comment.commenter_id[0].avatar_file.url" class="comment-avatar"></image>
						<view class="comment-info">
							<view class="comment-author">{{ comment.commenter_id[0].nickname }}</view>
							<view class="comment-time">{{ timestampToDateString(comment.create_time) }}</view>
						</view>
					</view>
					<view class="comment-body">{{ comment.content }}</view>
				</view>
			</view>
		</unicloud-db>

		<!-- 发送评论输入框 -->
		<view class="comment-input">
			<input v-model="comment_input" type="text" placeholder="请输入评论内容"></input>
			<view class="send-btn" @click="sendComment">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loaded: false,
				showdelete: false,
				uid: '',
				_id: '',
				where_post: '',
				where_comment: '',
				comment_input: '',
				data: {}
			};
		},
		onLoad(e) {
			const id = e.id;
			if (e && e.id) {
				this._id = id;
				this.where_post = "_id == '" + this._id + "'";
				this.where_comment = "post_id == '" + this._id + "'";
				this.loaded = true
			} else {
				uni.showModal({
					content: "页面参数错误",
					showCancel: false
				});
			}

			// 检查是否登录
			const user_info = uniCloud.getCurrentUserInfo();
			console.log(user_info);
			if (user_info.uid == null) {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/login/login-withpwd',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			} else {
				this.uid = user_info.uid
			}

		},
		methods: {
			remove_item(id) {
				this.$refs.commentDB.remove(id)
			},
			onqueryload(item) {
				if (item.author_id === '' || item.author_id === this.uid) {
					this.showdelete = true
				}
				console.log(item);
			},
			timestampToDateString(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			async sendComment() {
				if (!this.comment_input) return;
				// 在此处添加发送评论的逻辑，例如使用unicloud-db来添加评论数据
				const db = uniCloud.database();
				const c_db = db.collection("abu_post_comment")

				uni.showLoading({
					title: '加载中',
					mask: false
				});

				await c_db.add({
					post_id: this._id,
					content: this.comment_input
				}).then(res => {
					this.$refs.commentDB.loadData({
						clear: true
					})
					// 这里只是示例，实际逻辑需要根据具体情况进行调整
					uni.showToast({
						title: '操作成功'
					});
				}).catch(e => {
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				}).finally(e => {
					uni.hideLoading()
				})




				// 清空评论输入框
				this.comment_input = '';
			}
		}
	};
</script>

<style scoped>
	.page {
		padding: 10px;
	}

	.post-content {
		margin-bottom: 20px;
	}

	.post-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.post-time {
		font-size: 14px;
		color: #999;
		margin-bottom: 10px;
	}

	.post-image {
		width: 100%;
		height: auto;
		border-radius: 8px;
		margin-bottom: 10px;
	}

	.post-text {
		font-size: 16px;
		line-height: 1.5;
	}

	.comment-list {
		margin-top: 20px;
	}

	.comment-item {
		background-color: #f9f9f9;
		padding: 10px;
		margin-bottom: 10px;
		border-radius: 8px;
	}

	.comment-header {
		display: flex;
		align-items: center;
	}

	.comment-avatar {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.comment-info {
		flex: 1;
	}

	.comment-author {
		font-weight: bold;
	}

	.comment-time {
		font-size: 12px;
		color: #999;
	}

	.comment-body {
		margin-top: 10px;
	}

	.comment-input {
		display: flex;
		align-items: center;
		background-color: #f9f9f9;
		padding: 10px;
		border-radius: 8px;
		margin-top: 20px;
	}

	.comment-input input {
		flex: 1;
		border: none;
		outline: none;
		background-color: transparent;
		margin-right: 10px;
	}

	.send-btn {
		cursor: pointer;
		background-color: #007bff;
		color: #fff;
		padding: 5px 10px;
		border-radius: 4px;
	}
</style>